<template>
  <ConfigProvider component-size="large" :locale="store.language == 'cn' ? zhCN : enUS">
    <div class="layout-wrapper">
      <header>
        <img class="logo" src="https://img53.gkzhan.com/8/20171206/636481709815731994269.jpg" alt="">
        <AButton :class="{ active: route.name === 'home' }" @click="handleNavigation('home')">Home</AButton>
        <AButton :class="{ active: route.name === 'TestRecord' }" @click="handleNavigation('TestRecord')">Test Record</AButton>
        <AButton :class="{ active: route.name === 'TemplatePage' }" @click="handleNavigation('TemplatePage')">Template</AButton>
        <AButton :class="{ active: route.name === 'SetPage' }" @click="handleNavigation('SetPage')">Set</AButton>
        <div class="empty"></div>
        <ADropdown>
          <template #overlay>
            <AMenu @click="handleLanguageChange">
              <AMenuItem key="cn">{{ $t('common.cn') }}</AMenuItem>
              <AMenuItem key="en">{{ $t('common.en') }}</AMenuItem>
            </AMenu>
          </template>
          <AButton>
            {{ $t(`common.` + store.language) }}
            <DownOutlined />
          </AButton>
        </ADropdown>
        <!-- 消息 -->
        <div class="message">
          160+
        </div>
        <!-- 个人信息 -->
        <div class="person-info">
          <img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.rPQTtL06uTRQSkiUvIGykwAAAA?rs=1&pid=ImgDetMain&o=7&rm=3"
            alt="">
          <div class="right">
            <div class="name">Karm</div>
            <p>Admin</p>
          </div>
        </div>
      </header>
      <main>
        <RouterView></RouterView>
      </main>
    </div>
  </ConfigProvider>
</template>

<script setup>
import { ConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';
import { store } from './store';
import { DownOutlined } from '@ant-design/icons-vue';

const { t, locale } = useI18n();
const router = useRouter();
const route = useRoute();

/**
 * 处理导航
 */
const handleNavigation = (name) => {
  router.push({
    name: name
  });
};

/**
 * 处理语言切换
 */
const handleLanguageChange = ({ key }) => {
  locale.value = key;
  store.language = key;
}
</script>